import { createId, computeDistance } from 'utils'
import { INDEX_VIEW } from 'utils/constants'
const imgUrl1 = require('assets/images/pin1.png')
const imgUrl2 = require('assets/images/pin2.png')
const imgUrl3 = require('assets/images/pin3.png')

class MarkerDraw {
    constructor() { // objEntity
        this.markersTypeMap = [{
            draw: 'drawPoint',
            add: 'Point'
        }, {
            draw: 'drawPolyline',
            add: 'Polyline'
        }, {
            draw: 'drawPolygon',
            add: 'Polygon'
        }, {
            draw: 'drawCircle',
            add: 'Circle'
        }]
        this.currentMark = {} // 当前绘制标注
        this.markerImgArr = [imgUrl1, imgUrl2, imgUrl3]
        this.cacheMarkerView_1 = [] // 缓存主全景标注
        this.cacheMarkerView_2 = [] // 缓存侧全景标注
    }
    /**
     * @indexMarker 绘制标注的类型索引
     * @indexView 绘制全景实例的索引
     * @option 绘制标注的配置对像
     * @callback 绘制完成后的回调
    */
    initCurrentMark(indexMarker, indexView, option, callback) {
        this.currentMark = { // 当前绘制的图形
            _currentView: indexView,
            _option: option,
            _startDraw: true,
            _status: true,
            _callback: callback,
            _markerTypeIndex: indexMarker // ['Mark', 'Polyline', 'Polygon', 'circle']
        }
    }
    drawMark(evt, PSV) {
        if (!this.currentMark._startDraw) return
        const markerType = this.markersTypeMap[this.currentMark._markerTypeIndex].draw
        this[markerType](evt, PSV)
    }
    drawPoint(evt, PSV) {
        const pos = [evt.longitude, evt.latitude]
        console.log(pos)
        if (this.currentMark._status) { // 第一次创建
            this.currentMark._status = false
            this.currentMark.psvMarker = this.Point(pos, PSV)
            this.finishDraw(PSV)
            // currentMark.psvMarker.update(['polyline_rad'])
            // PSV.needsUpdate() // 强制更新
        }
    }
    drawPolyline(evt, PSV) { // 绘制线段
        if ((evt.button === 2)) {
            this.currentMark._objCache.polyline_rad = this.currentMark.psvMarker.polyline_rad
            this.finishDraw(PSV)
            return
        }
        const pos = [evt.longitude, evt.latitude]
        if (this.currentMark._status) { // 第一次创建
            this.currentMark._status = false
            this.currentMark.psvMarker = this.Polyline(pos, PSV)
        } else {
            this.currentMark.psvMarker.polyline_rad.push(pos)
        }
        this.currentMark.psvMarker.update(['polyline_rad'])
        PSV.needsUpdate() // 强制更新
    }
    drawPolygon(evt, PSV) { // 绘制面
        if ((evt.button === 2)) {
            PSV.removeMarker(this.currentMark.psvMarker)
            this.currentMark.psvMarker = this.Polygon(this.currentMark.psvMarker.polyline_rad, PSV)
            this.finishDraw(PSV)
            return
        }
        const pos = [evt.longitude, evt.latitude]
        if (this.currentMark._status) { // 第一次创建
            this.currentMark._status = false
            this.currentMark.psvMarker = this.Polyline(pos, PSV)
        } else {
            if (this.currentMark.psvMarker.polyline_rad.length > 2) {
                // currentMark.psvMarker.polyline_rad.pop()
                this.currentMark.psvMarker.polyline_rad[this.currentMark.psvMarker.polyline_rad.length - 1] = pos
                this.currentMark.psvMarker.polyline_rad.push(this.currentMark.psvMarker.polyline_rad[0])
            } else {
                this.currentMark.psvMarker.polyline_rad.push(pos)
                this.currentMark.psvMarker.polyline_rad.push(this.currentMark.psvMarker.polyline_rad[0])
                // currentMark.psvMarker.polyline_rad.push(currentMark.psvMarker.polyline_rad[0])
            }
        }
        this.currentMark.psvMarker.update(['polygon_rad'])
        PSV.needsUpdate() // 强制更新
    }
    drawCircle(evt, PSV) { // 绘制圆
        if ((evt.button === 2)) { // 右键结束
            this.finishDraw(PSV)
            return
        }
        const pos = [evt.longitude, evt.latitude]
        // console.log(currentMark._evt) // 保存下鼠标位置
        if ((evt.type === 'mousemove') && this.currentMark._startDraw && (!this.currentMark._status)) {
            // const start = { x: currentMark._evt.client_x, y: currentMark._evt.client_y }
            // const end = { x: evt.client_x, y: evt.client_y }
            const start = { x: this.currentMark._evt.viewer_x, y: 0 }
            const end = { x: evt.viewer_x, y: 0 }
            this.currentMark.psvMarker.circle = computeDistance(start, end)
            this.currentMark.psvMarker.update(['circle'])
            this.currentMark._objCache.circle = this.currentMark.psvMarker.circle
            PSV.needsUpdate() // 强制更新
        } else {
            if (this.currentMark._status) { // 第一次创建
                this.currentMark._evt = evt
                this.currentMark._status = false
                this.currentMark.psvMarker = this.Circle(pos, PSV)
            } else { // 第二个点结束
                this.finishDraw(PSV)
                // return
            }
        }
    }
    Point(pos, PSV) {
        this.currentMark._type = 'Point'
        const config = Object.assign({}, {
            tooltip: '',
            image: this.markerImgArr[0]
        }, this.currentMark._option)
        this.currentMark._objCache = {
            id: this.currentMark.id || createId(),
            longitude: pos[0],
            latitude: pos[1],
            image: config.image,
            width: 32,
            height: 32,
            content: '',
            anchor: 'bottom center',
            tooltip: config.tooltip,
            data: {
                name: '',
                desc: ''
            }
        }
        // this.pushCache(currentMark, obj)
        return PSV.addMarker(this.currentMark._objCache)
    }
    Polyline(pos, PSV) {
        this.currentMark._type = 'Polyline'
        const config = Object.assign({}, {
            tooltip: '',
            stroke: 'rgba(255, 0, 50, 0.8)',
            strokeLinecap: 'round',
            strokeLinejoin: 'round',
            strokeWidth: '3px'
        }, this.currentMark._option)
        this.currentMark._objCache = {
            id: this.currentMark.id || createId(),
            polyline_rad: [pos],
            content: '',
            svgStyle: {
                stroke: config.stroke,
                strokeLinecap: config.strokeLinecap,
                strokeLinejoin: config.strokeLinejoin,
                strokeWidth: config.strokeWidth
            },
            tooltip: config.tooltip,
            data: {
                name: '',
                desc: ''
            }
        }
        // this.pushCache(currentMark, obj)
        return PSV.addMarker(this.currentMark._objCache)
    }
    Polygon(posArr, PSV) {
        this.currentMark._type = 'Polygon'
        const config = Object.assign({}, {
            // tooltip: {
            //     content: '面',
            //     position: 'right bottom'
            // }
            tooltip: '',
            fill: 'rgba(0,0,0,0.1)',
            stroke: 'rgba(255, 0, 50, 0.8)',
            strokeWidth: '3px'
        }, this.currentMark._option)
        this.currentMark._objCache = {
            id: this.currentMark.id || createId(),
            content: '',
            polygon_rad: posArr,
            svgStyle: {
                fill: config.fill,
                stroke: config.stroke,
                strokeWidth: config.strokeWidth
            },
            tooltip: config.tooltip,
            data: {
                name: '',
                desc: ''
            }
        }
        // this.pushCache(currentMark, obj)
        return PSV.addMarker(this.currentMark._objCache)
    }
    Circle(pos, PSV) {
        this.currentMark._type = 'Circle'
        const config = Object.assign({}, {
            // tooltip: {
            //     content: '面',
            //     position: 'right bottom'
            // }
            tooltip: '',
            fill: 'rgba(0, 0, 0, 0.2)',
            stroke: 'rgba(255, 0, 0, 0.8)',
            strokeWidth: '4px'
        }, this.currentMark._option)
        this.currentMark._objCache = {
            id: this.currentMark.id || createId(),
            tooltip: config.tooltip,
            content: '',
            scale: [0.5, 2],
            // scale: [0.5, 1.5],
            circle: config.circle || 1,
            svgStyle: {
                fill: config.fill,
                // 'rgba(255,0,0,0.3)',
                stroke: config.stroke,
                strokeWidth: config.strokeWidth
            },
            longitude: pos[0],
            latitude: pos[1],
            data: {
                name: '',
                desc: ''
            }
        }
        // this.pushCache(currentMark, obj)
        console.log(PSV)
        return PSV.addMarker(this.currentMark._objCache)
    }
    finishDraw(PSV) {
        PSV.hud.container.style.cursor = 'move'
        this.currentMark._startDraw = false // 将当前绘制功能关闭结束绘制
        if (INDEX_VIEW[this.currentMark._currentView]) {
            this.pushCache(this.cacheMarkerView_2, this.currentMark._objCache)
        } else {
            this.pushCache(this.cacheMarkerView_1, this.currentMark._objCache)
        }
        if (this.currentMark._callback && typeof this.currentMark._callback === 'function') {
            this.currentMark._callback()
        }
        return this.currentMark
    }
    emptyCurrentMark() {
        if (!this.currentMark._startDraw) {
            this.currentMark = {}
        }
    }
    removeEntity() {
        this.entities.remove(this.entity)
    }
    pushCache(cacheMarkerView, markerObj) {
        cacheMarkerView.push(markerObj) // 缓存侧全景标注
    }
    spliceCache(cacheMarkerView, markerObj) {
        const index = cacheMarkerView.findIndex((value) => {
            return value.id === markerObj.id
        })
        cacheMarkerView.splice(index, 1)
    }
    emptyCache() {
        this.cacheMarkerView_1.length = 0
        this.cacheMarkerView_2.length = 0
    }
    initCache(markerArr_1, markerArr_2) {
        this.cacheMarkerView_1 = markerArr_1.slice()
        this.cacheMarkerView_2 = markerArr_2.slice()
    }
    updateMarker(object, PSV) {
        for (let key in object) {
            if (this.currentMark.psvMarker.hasOwnProperty(key)) {
                this.currentMark.psvMarker[key] = object[key]
                this.currentMark._objCache[key] = object[key]
            }
        }
        this.emptyCurrentMark()
        // PSV.needsUpdate()
    }
    loadMarker(cacheMarkerView, markerObj, PSV) {
        this.pushCache(cacheMarkerView, markerObj)
        PSV.addMarker(markerObj)
        PSV.needsUpdate()
    }
    removeMarker(cacheMarkerView, markerObj, PSV) {
        this.spliceCache(cacheMarkerView, markerObj)
        PSV.removeMarker(markerObj)
        // PSV.needsUpdate()
    }
}
export default new MarkerDraw()
    // drawPolygon(evt, currentMark, PSV) { // 绘制面
    //     if ((evt.button === 2)) {
    //         this.finishDraw(currentMark, PSV)
    //         return
    //     }
    //     const pos = [evt.longitude, evt.latitude]
    //     if (currentMark._status) { // 第一次创建
    //         currentMark._status = false
    //         currentMark.psvMarker = this.Polygon(pos, currentMark, PSV)
    //     } else {
    //         currentMark.psvMarker.polygon_rad.push(pos)
    //     }
    //     currentMark.psvMarker.update(['polygon_rad'])
    //     PSV.needsUpdate() // 强制更新
    // }